<template>
  <div class="main">
    <div class="community">
      <div
        v-for="(community, index) in communityList"
        :key="index"
        :class="{ 'community-active': selectCommunityId === community.id }"
        class="community-child"
        @click="selectCommunity(community.id)"
      >
        {{ community.name }}
      </div>
    </div>
    <div class="building">
      <div
        v-for="(building, index) in buildingList"
        :key="index"
        :class="{ 'building-active': selectBuildingId === building.id }"
        class="building-child"
        @click="selectBuilding(building.id)"
      >
        {{ building.name }}
      </div>
    </div>
    <div class="content">
      <div class="storey">
        <div
          v-for="(storey, index) in storeyList"
          :key="index"
          :class="{ 'storey-active': selectStoreyId === storey.id }"
          :style="{
            'border-bottom':
              storeyList.length === index + 1
                ? 'none'
                : '1px solid rgb(179, 176, 176)',
          }"
          class="storey-child"
          @click="selectStorey(storey.id)"
        >
          <span>{{ storey.no }}层</span>
          <i class="el-icon-circle-plus-outline" @click.stop="handleCreateDorm(storey.id)" />
        </div>
      </div>
      <div class="dorm">
        <el-collapse v-model="selectDormId" @change="changeDorm">
          <el-collapse-item
            v-for="(dorm, index) in dormList"
            :key="index"
            :title="dorm.code+'('+dorm.sex+')'"
            :name="dorm.id"
          >
            <el-button
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              icon="el-icon-plus"
              @click="handleCreateBed(dorm.id)"
            >
              新建床位
            </el-button>
            <el-row>
              <el-col v-for="(bed, index) in dorm.beds" :key="index" :span="4">
                <el-card :body-style="{ padding: '0px' }">
                  <svg-icon style="font-size: 120px;" icon-class="bed" />
                  <el-button type="text" class="button" @click="handleDeleteBed(bed.id)">
                    <i class="el-icon-delete" />
                  </el-button>
                  <div style="padding: 14px;">
                    <span>床位号:{{ bed.no }}  </span>
                    <span v-if="bed.user!==null"><svg-icon icon-class="people" />{{ bed.user.name }}</span>
                    <div class="bottom clearfix">
                      <el-button type="text" class="button" @click="handleCancelBed(bed.id)"> 退宿 </el-button>
                      <el-button type="text" class="button" @click="handleArrangeBed(bed.id)"> 安排 </el-button>
                      <el-button type="text" class="button" @click="handleEditBed(bed)">编辑</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row><span v-if="dorm.remark!==null">备注:{{ dorm.remark }}</span></el-row>
            <el-button
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              icon="el-icon-edit"
              @click="handleEditDorm(dorm)"
            >
              编辑宿舍
            </el-button>
            <el-button
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              icon="el-icon-delete"
              @click="handleDeleteDorm(dorm.id)"
            >
              删除宿舍
            </el-button>

          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <!--    床位-->
    <el-dialog :title="textMap[dialogStatus]+'床位'" :visible.sync="bedFormVisible">
      <el-form
        ref="dataForm"
        :model="tempBed"
        label-position="left"
        label-width="90px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="床号" prop="name">
          <el-col :span="12">
            <el-input v-model="tempBed.no" />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bedFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createBed():updateBed()">
          确定
        </el-button>
      </div>
    </el-dialog>

    <!--   安排 -->
    <el-dialog :title="安排住宿" :visible.sync="arrFormVisible">
      <el-form
        ref="dataForm"
        :model="bedUser"
        label-position="left"
        label-width="90px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="用户" prop="name">
          <el-col :span="12">
            <el-select
              v-model="bedUser.userId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="getUsers"
              :loading="loading"
            >
              <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="arrFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="arrangeBed()">
          确定
        </el-button>
      </div>
    </el-dialog>

    <!--    // dorm-->
    <el-dialog :title="textMap[dialogStatus]+'宿舍'" :visible.sync="dormFormVisible">
      <el-form
        ref="dataForm"
        :model="tempDorm"
        label-position="left"
        label-width="90px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="宿舍号">
          <el-col :span="12">
            <el-input v-model="tempDorm.code" />
          </el-col>
        </el-form-item>
        <el-form-item label="床位数">
          <el-col :span="12">
            <el-input v-model="tempDorm.num" />
          </el-col>
        </el-form-item>
        <el-form-item label="是否为学生宿舍">
          <el-col :span="12">
            <el-switch
              v-model="tempDorm.isStu"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="性别">
          <el-col :span="12">
            <el-select v-model="tempDorm.sex" placeholder="请选择">
              <el-option
                v-for="item in sexs"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="状态">
          <el-col :span="12">
            <el-select v-model="tempDorm.status" placeholder="请选择">
              <el-option
                v-for="item in statuses"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="备注">
          <el-col :span="12">
            <el-input v-model="tempDorm.remark" />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dormFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createDorm():updateDorm()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  arrangeBed,
  cancelBed,
  deleteBed,
  deleteDorm,
  listBuilding,
  listCommunity,
  listDorm,
  listStorey,
  patchBed, patchDorm,
  postBed, postDorm
} from '@/api/dorm'
import { listUser } from '@/api/dorm-user'

export default {
  name: 'Dorm',
  data() {
    return {
      communityList: undefined,
      buildingList: undefined,
      dormList: undefined,
      storeyList: undefined,
      selectCommunityId: undefined,
      selectBuildingId: undefined,
      selectStoreyId: undefined,
      selectDormId: undefined,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      tempBed: {
        id: undefined,
        no: undefined,
        dormId: undefined
      },
      bedFormVisible: false,
      arrFormVisible: false,
      bedUser: { id: undefined, userId: undefined },
      users: [],
      loading: false,
      tempDorm: {
        id: undefined,
        code: '',
        num: undefined,
        status: undefined,
        storeyId: undefined,
        sex: '',
        isStu: true,
        remark: ''
      },
      dormFormVisible: false,
      sexs: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],
      statuses: [{
        value: 0,
        label: '空闲'
      }, {
        value: 1,
        label: '特殊用途'
      }, {
        value: 2,
        label: '使用中'
      }]
    }
  },
  created() {
    this.getCommunity()
  },
  methods: {
    getCommunity() {
      listCommunity().then((response) => {
        this.communityList = response.data
        if (this.communityList.length !== 0) {
          this.selectCommunityId = this.communityList[0].id
          this.getBuilding()
        }
      })
    },
    getBuilding() {
      listBuilding({ communityId: this.selectCommunityId }).then((response) => {
        this.buildingList = response.data
        if (this.buildingList.length !== 0) {
          this.selectBuildingId = this.buildingList[0].id
          this.getStorey()
        }
      })
    },
    getStorey() {
      listStorey({ buildingId: this.selectBuildingId }).then((response) => {
        this.storeyList = response.data
        if (this.storeyList.length !== 0) {
          this.selectStoreyId = this.storeyList[0].id
          this.getDorm()
        }
      })
    },
    getDorm() {
      listDorm({ storeyId: this.selectStoreyId }).then((response) => {
        this.dormList = response.data
      })
    },
    getUsers(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          listUser({ name: query, current: 1, pageSize: 20 }).then(response => {
            this.users = response.data
          }
          )
        }, 200)
      } else {
        this.users = []
      }
    },
    selectCommunity(id) {
      this.selectCommunityId = id
      this.getBuilding()
    },
    selectBuilding(id) {
      this.selectBuildingId = id
      console.log(id)
      this.getStorey()
    },
    selectStorey(id) {
      this.selectStoreyId = id
      this.getDorm()
    },
    selectDorm(id) {
      this.selectDormId = id
    },
    // 请求床位
    changeDorm() {
    },
    addDorm() {
    },
    handleCancelBed(BedId) {
      this.$confirm('是否退宿?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelBed(BedId).then(() => {
          this.$notify({
            title: '成功',
            message: '退宿成功!',
            type: 'success',
            duration: 2000
          })
        })
        this.getDorm()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDeleteBed(BedId) {
      this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBed(BedId).then(() => {
          this.getDorm()
          this.$notify({
            title: '成功',
            message: '删除成功!',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCreateBed(dormId) {
      this.resetBedTemp()
      this.tempBed.dormId = dormId
      this.dialogStatus = 'create'
      this.bedFormVisible = true
    },
    handleEditBed(bed) {
      this.tempBed = bed
      this.dialogStatus = 'update'
      this.bedFormVisible = true
    },
    handleArrangeBed(bedId) {
      this.arrFormVisible = true
      this.resetBedUserId()
      this.bedUser.id = bedId
    },
    createBed() {
      postBed(this.tempBed).then(() => {
        this.getDorm()
        this.bedFormVisible = false
        this.$notify({
          title: '成功',
          message: '添加成功!',
          type: 'success',
          duration: 2000
        })
      })
    },
    updateBed() {
      patchBed(this.tempBed).then(() => {
        this.getDorm()
        this.bedFormVisible = false
        this.$notify({
          title: '成功',
          message: '更新成功!',
          type: 'success',
          duration: 2000
        })
      })
    },
    arrangeBed() {
      arrangeBed(this.bedUser).then(() => {
        this.getDorm()
        this.arrFormVisible = false
        this.$notify({
          title: '成功',
          message: '更新成功!',
          type: 'success',
          duration: 2000
        })
      })
    },
    resetBedTemp() {
      this.temp = {
        id: undefined,
        no: undefined,
        dormId: undefined
      }
    },
    resetBedUserId() {
      this.bedUser = { id: undefined, userId: undefined }
    },
    // dorm
    handleDeleteDorm(DormId) {
      this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDorm(DormId).then(() => {
          this.getDorm()
          this.$notify({
            title: '成功',
            message: '删除成功!',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCreateDorm(storeyId) {
      this.resetDormTemp()
      this.tempDorm.storeyId = storeyId
      this.dialogStatus = 'create'
      this.dormFormVisible = true
    },
    handleEditDorm(dorm) {
      this.tempDorm = dorm
      this.dialogStatus = 'update'
      this.dormFormVisible = true
    },
    createDorm() {
      postDorm(this.tempDorm).then(() => {
        this.getDorm()
        this.dormFormVisible = false
        this.$notify({
          title: '成功',
          message: '添加成功!',
          type: 'success',
          duration: 2000
        })
      })
    },
    updateDorm() {
      patchDorm(this.tempDorm).then(() => {
        this.getDorm()
        this.dormFormVisible = false
        this.$notify({
          title: '成功',
          message: '更新成功!',
          type: 'success',
          duration: 2000
        })
      })
    },
    resetDormTemp() {
      this.tempDorm = {
        id: undefined,
        code: '',
        num: undefined,
        status: undefined,
        storeyId: undefined,
        sex: '',
        isStu: true,
        remark: ''
      }
    }
  }
}
</script>

<style scoped>
.main {
  padding: 0px 20px;
}

.community {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 0;
  margin: 10px 0;
  border-radius: 4px;
  background-color: #eef1f6;
}

.community-child {
  cursor: pointer;
  padding: 4px 6px;
  border: 1px solid rgb(110, 109, 109);
  color: rgb(122, 121, 121);
  margin: 0 10px;
  border-radius: 12px;
  font-size: 12px;
}

.community-active {
  padding: 4px 6px;
  border: 1px solid #42b983;
  color: #fff;
  background-color: #42b983;
  margin: 0 10px;
  border-radius: 12px;
  font-size: 12px;
}

.building {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 0;
  margin: 10px 0;
  border-radius: 4px;
  background-color: #eef1f6;
}

.building-child {
  cursor: pointer;
  padding: 4px 6px;
  border: 1px solid rgb(110, 109, 109);
  color: rgb(122, 121, 121);
  margin: 0 10px;
  border-radius: 12px;
  font-size: 12px;
}

.building-active {
  padding: 4px 6px;
  border: 1px solid #42b983;
  color: #fff;
  background-color: #42b983;
  margin: 0 10px;
  border-radius: 12px;
  font-size: 12px;
}

.content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.storey {
  width: 250px;
  margin-right: 20px;
  background-color: #eef1f6;
  padding: 0 14px;
  border-radius: 6px;
}

.storey-child {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid rgb(179, 176, 176);
  color: rgb(122, 121, 121);
  font-size: 14px;
}

.storey-active {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid rgb(179, 176, 176);
  color: #42b983;
  font-size: 14px;
}

.dorm {
  flex: 1;
}

.el-icon-circle-plus-outline {
  cursor: pointer;
  color: #42b983;
  font-size: 18px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
